import React from 'react';
import { DropTarget } from 'react-dnd';

import DropItem from './DropItem';
import ItemTypes from './ItemTypes';
import styles from './Content.less';

const cardTarget = {
  drop(props, monitor) {
    props.onDrop(monitor.getItem());
  },
};

@DropTarget(ItemTypes.CARD, cardTarget, connect => ({
  connectDropTarget: connect.dropTarget(),
}))
export default class Content extends React.Component {
  render() {
    const { connectDropTarget, isMoving } = this.props;
    const {
      dropList = [], moveItem, findItem, changeAddStatus,
      className = '', handleDelItem, handleItemClick, selectedItem,
    } = this.props;
    const itemMoving = isMoving ? styles.item_moving : '';
    return (
      connectDropTarget &&
      connectDropTarget(
        <div className={`${styles.drop_target_box} ${className}`}>
          <div className={`${styles.drop_con} ${itemMoving}`}>
            {dropList.map(item => (
              <DropItem
                key={item.id}
                id={item.id}
                text={item.name}
                item={item}
                hidden={item.hidden}
                moveItem={moveItem}
                findItem={findItem}
                changeAddStatus={changeAddStatus}
                handleDelItem={handleDelItem}
                handleItemClick={handleItemClick}
                activeId={selectedItem.id}
              />
            )
            )}
          </div>
        </div>,
      )
    );
  }
}
